<script setup lang="ts">
import type { TooltipPlacement } from "vidstack";
import Tooltip from "../Tooltip.vue";
import PlayIcon from '~icons/media/play';
import PauseIcon from '~icons/media/pause';

defineProps<{
  tooltipPlacement: TooltipPlacement
}>();
</script>

<template>
  <Tooltip :placement="tooltipPlacement">
    <template #trigger>
      <media-play-button
        class="ring-media-focus relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4"
      >
        <PlayIcon class="media-paused:block hidden h-8 w-8" />
        <PauseIcon class="media-paused:hidden h-8 w-8" />
      </media-play-button>
    </template>

    <template #content>
      <span class="media-paused:block hidden">Play/播放</span>
      <span class="media-paused:hidden">Pause/暂停</span>
    </template>
  </Tooltip>
</template>
